<template>
  <div class="forgot-password-container">
    <van-form ref="form" @submit="onSubmit">
      <h2>找回密码</h2>
      <van-field
        v-model="realName"
        name="真实姓名"
        label="真实姓名"
        placeholder="请输入真实姓名"
        :rules="[{ required: true, message: '请输入真实姓名' }]"
        class="custom-field"
      />
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' },
        ]"
        class="custom-field"
      />
      <van-field
        v-model="email"
        name="邮箱"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[
          { required: true, message: '请输入邮箱' },
          {
            pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
            message: '请输入正确的邮箱格式',
          },
        ]"
        class="custom-field"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入新密码"
        :rules="[
          { required: true, message: '请输入新密码' },
          { min: 8, message: '密码长度至少为8个字符' },
          {
            pattern:
              /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
            message: '密码必须包含大小写字母、数字和特殊字符',
          },
        ]"
        class="custom-field"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          class="submit-button"
          :loading="loading"
          loading-text="提交中..."
        >
          找回密码
        </van-button>
      </div>
      <div class="link-container">
        <router-link to="/login">返回登录</router-link>
      </div>
    </van-form>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { userForgotPasswordService } from "@/api/user"; // 假设你有一个找回密码服务

const router = useRouter();
const form = ref(null);

const realName = ref("");
const phone = ref("");
const email = ref("");
const password = ref("");
const loading = ref(false);

const onSubmit = async () => {
  try {
    if (!(await validateForm())) return;

    loading.value = true;
    const forgotPasswordResult = await performForgotPassword();
    handleForgotPasswordResponse(forgotPasswordResult);
  } catch (error) {
    handleError(error);
  } finally {
    loading.value = false;
  }
};

const validateForm = async () => {
  try {
    return await form.value.validate();
  } catch {
    Toast.fail("表单验证失败");
    return false;
  }
};

const performForgotPassword = async () => {
  return await userForgotPasswordService({
    realName: realName.value,
    phone: phone.value,
    email: email.value,
    password: password.value,
  });
};

const handleForgotPasswordResponse = (result) => {
  if (result.code === 1) {
    Toast.success(result.message || "密码找回成功");
    router.push("/login");
  } else {
    Toast.fail(result.message || "密码找回失败");
  }
};

const handleError = (error) => {
  console.error(
    "Error during forgot password:",
    error.response?.data || error.message
  );
  if (error.response?.status === 400) {
    Toast.fail("请求参数错误");
  } else if (error.response?.status === 500) {
    Toast.fail("服务器内部错误");
  } else {
    Toast.fail("服务错误");
  }
};
</script>
  
  <style scoped>
.forgot-password-container {
  background-color: #f0f9eb;
  padding: 40px;
  border-radius: 16px;
  max-width: 400px;
  margin: auto;
  margin-top: 100px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.forgot-password-container:hover {
  transform: scale(1.02);
}

h2 {
  color: #07c160;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
}

/* 美化输入框 */
.custom-field {
  border: 2px solid #ced4da;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  background-color: #fff;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.custom-field:focus-within {
  border-color: #07c160;
  box-shadow: 0 0 0 0.2rem rgba(7, 193, 96, 0.25);
}

.custom-field .van-field__label {
  color: #495057;
  font-weight: 500;
}

.custom-field .van-field__control::placeholder {
  color: #adb5bd;
  font-size: 0.9rem;
}

/* 按钮样式 */
.submit-button {
  background-color: #07c160;
  border: none;
  color: white;
  padding: 12px 24px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.submit-button:hover {
  background-color: #05a64d;
  transform: translateY(-5px);
}

/* 链接样式 */
.link-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.link-container a {
  color: #07c160;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease-in-out;
}

.link-container a:hover {
  color: #05a64d;
}
</style>